import React, {memo, useEffect, useState} from 'react';

const App = memo(() => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    //负责告知React，在执行完当前组件渲染后要执行的副作用代码
    console.log("监听redux");

    //useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B
    //这是 effect 可选的清除机制, 在组件卸载重新渲染时执行, 每个effect都可以返回一个清除函数
    return () => {
      console.log("取消监听redux")
    }

    //如果没有第二个参数，组件每次卸载重新渲染时，都会执行清除函数
  });

  return (
      <div>
        <h2>当前计数：{counter}</h2>
        <button onClick={() => setCounter(counter + 1)}>+1</button>
      </div>
  );
});

export default App;